//端口
var Port = {
    fontFamily:'Courier New',
    fontSize:22,
    fontColor: '#ffffff',
    width: 160,//接口宽度
    height:120,//接口高度
    lugWidth:30,//突出部宽度
    lugHeight:30,//突出部高度
    lugMarginLeft:2,
    lampstandWidth:20,//底座宽度
    lampstandHeight:50,//底座高度
    lineWidth:2,//线宽
    borderHorSpace:6,//线框距水平边沿间隔
    borderVerSpace:4,//现况剧垂直边沿间隔
    arrowColor:'#cc37eb',//箭头颜色
    createNew: function(name){//名称
        var port = {};
        port.x=0;
        port.y=0;
        port.name = name;
        port.direct = 'left';
        port.bodyBackground = '#a1c4c0';
        port.connectLines = [];
        port.getOutConnectorPos = function(){
            var x = 0, y = 0;
            if(port.direct == 'left'){
                y = this.y + Port.height * 3 / 4;
                x = this.x - 2;
            }else{
                y = this.y + Port.height * 1 / 4;
                x = this.x + Port.width + 2;
            }
            return {x:x,y:y};
        };
        port.getInConnectorPos = function(){
            var x = 0, y = 0;
            if(port.direct == 'left'){
                y = this.y + Port.height * 1 / 4;
                x = this.x - 2;
                x -= Path.lineWidth;
            }else{
                y = this.y + Port.height * 3 / 4;
                x = this.x + Port.width + 2;
                x += Path.lineWidth;
            }
            return {x:x,y:y};
        };
        port.draw = function(canvas){
            Port.draw(this,canvas);
        }
        return port;
    },
    draw : function(port, canvas){
        //画底色
        canvas.fillStyle = port.bodyBackground;
        canvas.fillRect(port.x, port.y, Port.width,Port.height);
        //画接口
        var interfaceBackground = '#609bc3';//突出部颜色
        var borderColor = '#ffffff';//围框颜色
        if(port.direct == 'left'){
            //画突出部1
            canvas.fillStyle = interfaceBackground;
            canvas.fillRect(port.x + Port.lugMarginLeft, port.y + (Port.height - 2) / 4 - Port.lugHeight / 2, Port.lugWidth,Port.lugHeight);
            //画底座1
            canvas.fillStyle = interfaceBackground;
            canvas.fillRect(port.x + Port.lugMarginLeft + Port.lugWidth, port.y + (Port.height - 2) / 4 - Port.lampstandHeight / 2, Port.lampstandWidth,Port.lampstandHeight);
            //画突出部2
            canvas.fillStyle = interfaceBackground;
            canvas.fillRect(port.x + Port.lugMarginLeft, port.y + (Port.height - 2) * 3 / 4 - Port.lugHeight / 2, Port.lugWidth,Port.lugHeight);
            //画底座2
            canvas.fillStyle = interfaceBackground;
            canvas.fillRect(port.x + Port.lugMarginLeft + Port.lugWidth, port.y + (Port.height - 2) * 3 / 4 - Port.lampstandHeight / 2, Port.lampstandWidth,Port.lampstandHeight);
            //画间隔线
            canvas.beginPath();
            canvas.strokeStyle = interfaceBackground;
            canvas.lineWidth=Port.lineWidth;
            canvas.moveTo(port.x + Port.lugMarginLeft,port.y + Port.height / 2 - Port.lineWidth / 2);
            canvas.lineTo(port.x + Port.lugMarginLeft + Port.lugWidth + Port.lampstandWidth,port.y + Port.height / 2 - Port.lineWidth / 2);
            canvas.stroke();
            //画围框1
            canvas.beginPath();
            canvas.strokeStyle = borderColor;
            canvas.lineWidth=Port.lineWidth;
            canvas.moveTo(port.x + Port.borderHorSpace + Port.lugWidth,port.y + (Port.height - 2) / 4 - Port.lugHeight / 2 + Port.borderVerSpace);
            canvas.lineTo(port.x + Port.borderHorSpace,port.y + (Port.height - 2) / 4 - Port.lugHeight / 2 + Port.borderVerSpace);
            canvas.lineTo(port.x + Port.borderHorSpace,port.y + (Port.height - 2) / 4 + Port.lugHeight / 2 -Port.borderVerSpace);
            canvas.lineTo(port.x + Port.borderHorSpace + Port.lugWidth,port.y + (Port.height - 2) / 4 + Port.lugHeight / 2 -Port.borderVerSpace);
            canvas.stroke();
            //画围框2
            canvas.beginPath();
            canvas.strokeStyle = borderColor;
            canvas.lineWidth=Port.lineWidth;
            canvas.moveTo(port.x + Port.borderHorSpace + Port.lugWidth,port.y + (Port.height - 2) * 3 / 4 - Port.lugHeight / 2 + Port.borderVerSpace);
            canvas.lineTo(port.x + Port.borderHorSpace,port.y + (Port.height - 2) * 3 / 4 - Port.lugHeight / 2 + Port.borderVerSpace);
            canvas.lineTo(port.x + Port.borderHorSpace,port.y + (Port.height - 2) * 3 / 4 + Port.lugHeight / 2 -Port.borderVerSpace);
            canvas.lineTo(port.x + Port.borderHorSpace + Port.lugWidth,port.y + (Port.height - 2) * 3 / 4 + Port.lugHeight / 2 -Port.borderVerSpace);
            canvas.stroke();
            //画箭头1
            drawArrow(canvas,port.x + Port.borderHorSpace + Port.lineWidth * 2, port.y + (Port.height - 2) / 4, port.x + Port.lugWidth, port.y + (Port.height - 2) / 4, 30, 10, Port.lineWidth, Port.arrowColor);
            //画箭头2
            drawArrow(canvas, port.x + Port.lugWidth, port.y + (Port.height - 2) * 3 / 4,port.x + Port.borderHorSpace + Port.lineWidth * 2, port.y + (Port.height - 2) * 3 / 4, 30, 10, Port.lineWidth, Port.arrowColor);
            //画出名字
            canvas.font = Port.fontSize + "px " + Port.fontFamily;
            canvas.fillStyle = Port.fontColor;
            canvas.textAlign="left";
            canvas.fillText(port.name,port.x + Port.lugMarginLeft + Port.lugWidth + Port.lampstandWidth + Port.lugMarginLeft, port.y + (Port.height + Port.fontSize) / 2 - 2 , Port.width - Port.lugMarginLeft - Port.lugWidth - Port.lampstandWidth - Port.lugMarginLeft);
        }else{
            //画突出部1
            canvas.fillStyle = interfaceBackground;
            canvas.fillRect(port.x + Port.width - Port.lugWidth - Port.lugMarginLeft, port.y + (Port.height - 2) / 4 - Port.lugHeight / 2, Port.lugWidth,Port.lugHeight);
            //画底座1
            canvas.fillStyle = interfaceBackground;
            canvas.fillRect(port.x  + Port.width - Port.lugWidth - Port.lugMarginLeft - Port.lampstandWidth, port.y + (Port.height - 2) / 4 - Port.lampstandHeight / 2, Port.lampstandWidth,Port.lampstandHeight);
            //画突出部2
            canvas.fillStyle = interfaceBackground;
            canvas.fillRect(port.x + Port.width - Port.lugWidth - Port.lugMarginLeft, port.y + (Port.height - 2) * 3 / 4 - Port.lugHeight / 2, Port.lugWidth,Port.lugHeight);
            //画底座2
            canvas.fillStyle = interfaceBackground;
            canvas.fillRect(port.x  + Port.width - Port.lugWidth - Port.lugMarginLeft - Port.lampstandWidth, port.y + (Port.height - 2) * 3 / 4 - Port.lampstandHeight / 2, Port.lampstandWidth,Port.lampstandHeight);
            //画间隔线
            canvas.beginPath();
            canvas.strokeStyle = interfaceBackground;
            canvas.lineWidth=Port.lineWidth;
            canvas.moveTo(port.x + Port.width - Port.lugMarginLeft,port.y + Port.height / 2 - Port.lineWidth / 2);
            canvas.lineTo(port.x + Port.width - Port.lugMarginLeft - Port.lugWidth - Port.lampstandWidth,port.y + Port.height / 2 - Port.lineWidth / 2);
            canvas.stroke();
            //画围框1
            canvas.beginPath();
            canvas.strokeStyle = borderColor;
            canvas.lineWidth=Port.lineWidth;
            canvas.moveTo(port.x + Port.width - Port.borderHorSpace - Port.lugWidth,port.y + (Port.height - 2) / 4 - Port.lugHeight / 2 + Port.borderVerSpace);
            canvas.lineTo(port.x  + Port.width -  Port.borderHorSpace,port.y + (Port.height - 2) / 4 - Port.lugHeight / 2 + Port.borderVerSpace);
            canvas.lineTo(port.x  + Port.width -  Port.borderHorSpace,port.y + (Port.height - 2) / 4 + Port.lugHeight / 2 -Port.borderVerSpace);
            canvas.lineTo(port.x + Port.width - Port.borderHorSpace - Port.lugWidth,port.y + (Port.height - 2) / 4 + Port.lugHeight / 2 -Port.borderVerSpace);
            canvas.stroke();
            //画围框2
            canvas.beginPath();
            canvas.strokeStyle = borderColor;
            canvas.lineWidth=Port.lineWidth;
            canvas.moveTo(port.x + Port.width - Port.borderHorSpace - Port.lugWidth,port.y + (Port.height - 2) * 3 / 4 - Port.lugHeight / 2 + Port.borderVerSpace);
            canvas.lineTo(port.x  + Port.width -  Port.borderHorSpace,port.y + (Port.height - 2) * 3 / 4 - Port.lugHeight / 2 + Port.borderVerSpace);
            canvas.lineTo(port.x  + Port.width -  Port.borderHorSpace,port.y + (Port.height - 2) * 3 / 4 + Port.lugHeight / 2 -Port.borderVerSpace);
            canvas.lineTo(port.x + Port.width - Port.borderHorSpace - Port.lugWidth,port.y + (Port.height - 2) * 3 / 4 + Port.lugHeight / 2 -Port.borderVerSpace);
            canvas.stroke();
            //画箭头1
            drawArrow(canvas,port.x + Port.width - Port.lugWidth - Port.borderHorSpace + Port.lineWidth , port.y + (Port.height - 2) / 4, port.x + Port.width - Port.borderHorSpace - Port.lineWidth * 3, port.y + (Port.height - 2) / 4, 30, 10, Port.lineWidth, Port.arrowColor);
            //画箭头2
            drawArrow(canvas, port.x + Port.width - Port.borderHorSpace - Port.lineWidth * 3, port.y + (Port.height - 2) * 3 / 4,port.x + Port.width - Port.lugWidth - Port.borderHorSpace + Port.lineWidth , port.y + (Port.height - 2) * 3 / 4, 30, 10, Port.lineWidth, Port.arrowColor);
            //画出名字
            canvas.font = Port.fontSize + "px " + Port.fontFamily;
            canvas.fillStyle = Port.fontColor;
            canvas.textAlign="left";
            canvas.fillText(port.name,port.x + Port.lugMarginLeft, port.y + (Port.height + Port.fontSize) / 2 - 2 , Port.width - Port.lugMarginLeft - Port.lugWidth - Port.lampstandWidth - Port.lugMarginLeft);
        }
    }
};